<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        height: 200px;
        width: 200px;
        background-color: thistle;
      }
      button {
        margin-top: 20px;
      }
    </style>
  </head>
  <body>
    <div></div>
    <button>开始</button>
  </body>
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <!-- 要封装！！！！！！！！！！！！！！！！ -->
  <script>
    // window.onload = function () {
    //   var btn = document.querySelector("button");
    //   var div = document.querySelector("div");
    //   var begin = 0,
    //     step = 10,
    //     end = 400,
    //     timer = null;
    //   // 事件触发
    //   btn.addEventListener("click", function () {
    //     // 设置定时器
    //     timer = setInterval(function () {
    //       // 改变起始值
    //       begin += step;
    //       div.style.marginLeft = begin + "px";
    //       if (begin >= end) {
    //         // 停止动画
    //         // 清除定时器
    //         clearInterval(timer);
    //       }
    //     }, 10);
    //   });
    // };

    /*----------------------------封装之前----------------------------------------*/

    /*-----------------------------封装之后---------------------------------------*/
    window.onload = function () {
      var btn = document.querySelector("button");
      var div = document.querySelector("div");
      var begin = 0,
        step = 10,
        end = 400,
        timer = null;
      // 事件触发
      btn.addEventListener("click", function () {
        fn(timer, begin, step, end, 10);
      });
      // 封装函数
      function fn(timer, begin, step, end, second) {
        // 设置定时器
        timer = setInterval(function () {
          // 改变起始值
          begin += step;
          div.style.marginLeft = begin + "px";
          if (begin >= end) {
            // 停止动画
            // 清除定时器
            clearInterval(timer);
          }
        }, second);
      }
    };
  </script>
</html>
